<template>
  <div class="home-page">
    <!-- 全屏轮播图 -->
    <section class="hero-section">
      <el-carousel height="600px" :interval="5000" arrow="always">
        <el-carousel-item v-for="(slide, index) in carouselSlides" :key="index">
          <div class="carousel-content" :style="{ backgroundImage: `url(${slide.image})` }">
            <div class="overlay"></div>
            <div class="carousel-caption">
              <h2 class="slide-subtitle animate__animated animate__fadeInDown">{{ slide.subtitle }}</h2>
              <h1 class="slide-title animate__animated animate__fadeInUp">{{ slide.title }}</h1>
              <el-button 
                class="slide-button animate__animated animate__fadeInUp" 
                type="primary" 
                size="large"
                @click="navigateTo(slide.buttonLink)"
              >
                {{ slide.buttonText }}
              </el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 主要业务领域 -->
    <section class="business-areas">
      <div class="page-container">
        <div class="business-grid">
          <div 
            v-for="(area, index) in businessAreas" 
            :key="index" 
            class="business-card"
            @click="navigateTo(area.link)"
          >
            <div class="business-icon">
              <i :class="area.icon"></i>
            </div>
            <h3>{{ area.title }}</h3>
            <p>{{ area.description }}</p>
            <div class="business-hover">
              <span>了解更多 <i class="el-icon-arrow-right"></i></span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 正在发生 (新闻动态) -->
    <section class="news-section">
      <div class="page-container">
        <div class="section-header">
          <h2 class="section-title">正在发生</h2>
        </div>
        
        <div class="news-content">
          <div class="main-news" v-if="newsList.length > 0">
            <div class="main-news-item" @click="viewNewsDetail(newsList[0]._id)">
              <div class="news-image">
                <img :src="newsList[0].cover || require('@/assets/images/news/news-placeholder.jpg')" :alt="newsList[0].title">
              </div>
              <div class="news-info">
                <h3>{{ newsList[0].title }}</h3>
                <p>{{ getSummary(newsList[0].content, 120) }}</p>
                <div class="news-meta">
                  <span class="date">{{ formatDate(newsList[0].editTime) }}</span>
                  <span class="read-more">阅读全文 <i class="el-icon-arrow-right"></i></span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="sub-news">
            <div 
              v-for="(item, index) in newsList.slice(1, 4)" 
              :key="index" 
              class="sub-news-item" 
              @click="viewNewsDetail(item._id)"
            >
              <div class="news-info">
                <h3>{{ item.title }}</h3>
                <div class="news-meta">
                  <span class="date">{{ formatDate(item.editTime) }}</span>
                  <span class="read-more">阅读全文 <i class="el-icon-arrow-right"></i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="news-more">
          <router-link to="/news" class="more-link">探索更多 <i class="el-icon-arrow-right"></i></router-link>
        </div>
      </div>
    </section>

    <!-- 公司介绍视频 -->
    <section class="video-section">
      <div class="page-container">
        <div class="video-container">
          <div class="video-text">
            <h2>开拓新价值 共创新未来</h2>
            <p>易凡科技致力于为客户提供高品质的软件开发和信息技术服务，帮助企业数字化转型和创新发展</p>
            <router-link to="/about" class="video-link">了解更多 <i class="el-icon-arrow-right"></i></router-link>
          </div>
          <div class="video-player">
            <div class="video-placeholder" @click="playVideo">
              <img src="@/assets/images/logo/logo.png" alt="公司宣传视频">
              <div class="play-button">
                <i class="el-icon-video-play"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 加入我们 -->
    <section class="join-section">
      <div class="page-container">
        <div class="join-container">
          <div class="join-content">
            <h2>加入易凡</h2>
            <h3>遇见新未来，发现新自己</h3>
            <p>我们秉持能力导向、全面发展的人才理念，为有能力的员工提供广阔的发展舞台</p>
            <router-link to="/recruits" class="join-link">加入我们 <i class="el-icon-arrow-right"></i></router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- 股票信息 -->
    <section class="stock-section">
      <div class="page-container">
        <div class="stock-container">
          <div class="stock-item">
            <div class="stock-name">易凡科技 SH600123</div>
            <div class="stock-price">20.36 <span class="up">▲ 0.42</span></div>
            <div class="stock-time">截止时间: {{ currentTime }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 数据统计 -->
    <div class="statistics-section">
      <div class="page-container">
        <div class="section-header text-center">
          <h2 class="section-title">企业成就</h2>
          <p class="section-desc">易凡科技致力于成为行业领导者，以下是我们的一些成就数据</p>
        </div>
        <div class="statistics-container" v-loading="statisticsLoading">
          <div class="statistic-item" v-for="(item, index) in statisticsData" :key="index">
            <div class="statistic-icon">
              <i :class="item.icon"></i>
            </div>
            <div class="statistic-number">
              <CountTo 
                :start-val="0" 
                :end-val="item.value" 
                :duration="2500" 
                :decimals="item.decimals || 0"
                separator=","
              />
              <span class="statistic-unit" v-if="item.unit">{{ item.unit }}</span>
            </div>
            <div class="statistic-title">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { getHotNews } from '@/api/news';
import { formatDate, getSummary } from '@/utils/helper';
import { getOverview } from '@/api/statistics';
import CountTo from '@/components/CountTo.vue';

export default {
  name: 'HomeView',
  components: {
    CountTo
  },
  setup() {
    const router = useRouter();
    const newsList = ref([]);
    const isLoading = ref(false);
    const statisticsData = ref([]);
    const statisticsLoading = ref(false);
    
    // 格式化当前时间
    const currentTime = computed(() => {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    });
    
    // 轮播图数据
    const carouselSlides = [
      {
        title: '让更多人过上更有品质的生活',
        subtitle: '开拓新价值',
        buttonText: '了解更多',
        buttonLink: '/about',
        image: require('@/assets/images/banner/陌上菜园网站img1.jpg')
      },
      {
        title: '以创新技术赋能企业数字化转型',
        subtitle: '技术引领发展',
        buttonText: '我们的业务',
        buttonLink: '/boxs',
        image: require('@/assets/images/banner/陌上菜园网站img2.jpg')
      },
      {
        title: '构建可持续发展的数字化未来',
        subtitle: '共创美好未来',
        buttonText: '加入我们',
        buttonLink: '/recruits',
        image: require('@/assets/images/banner/陌上菜园网站img3.jpg')
      }
    ];
    
    // 业务领域数据
    const businessAreas = [
      {
        title: '软件开发',
        description: '专业定制软件开发服务，满足企业特定需求',
        icon: 'el-icon-s-opportunity',
        link: '/boxs/software'
      },
      {
        title: '系统集成',
        description: '整合各类软硬件资源，打造高效信息化系统',
        icon: 'el-icon-s-cooperation',
        link: '/boxs/integration'
      },
      {
        title: '技术咨询',
        description: '提供专业技术咨询，帮助企业规划IT战略',
        icon: 'el-icon-s-management',
        link: '/boxs/consulting'
      },
      {
        title: '解决方案',
        description: '针对行业痛点提供一站式整体解决方案',
        icon: 'el-icon-s-platform',
        link: '/boxs/solutions'
      }
    ];
    
    // 获取新闻列表
    const fetchNews = async () => {
      isLoading.value = true;
      try {
        const res = await getHotNews({ limit: 4 });
        if (res.data && res.data.ActionType === 'ok') {
          newsList.value = res.data.data;
          
          // 检查是否返回空数据或使用降级数据
          if ((newsList.value.length === 0 || res.data.isUsingFallback) && !res.data.data) {
            // 使用降级数据
            newsList.value = [
              {
                _id: 'news1',
                title: '易凡科技成功完成新一轮融资',
                content: '近日，易凡科技宣布完成新一轮融资，本轮融资将用于研发投入和市场拓展，进一步提升公司核心竞争力。',
                cover: '',
                editTime: new Date().toISOString()
              },
              {
                _id: 'news2',
                title: '易凡科技与多家企业达成战略合作',
                content: '易凡科技近期与多家知名企业达成战略合作，将在软件开发、系统集成等领域展开深度合作，共同推动行业发展。',
                cover: '',
                editTime: new Date().toISOString()
              },
              {
                _id: 'news3',
                title: '易凡科技推出全新数字化解决方案',
                content: '易凡科技日前推出全新数字化解决方案，帮助企业加速数字化转型，提升运营效率和市场竞争力。',
                cover: '',
                editTime: new Date().toISOString()
              },
              {
                _id: 'news4',
                title: '易凡科技获评年度最佳软件服务商',
                content: '在日前举行的行业评选中，易凡科技凭借优质的服务和创新的技术获评"年度最佳软件服务商"称号。',
                cover: '',
                editTime: new Date().toISOString()
              }
            ];
          }
        }
      } catch (error) {
        console.error('获取新闻失败:', error);
        // 使用降级数据
        newsList.value = [
          {
            _id: 'news1',
            title: '易凡科技成功完成新一轮融资',
            content: '近日，易凡科技宣布完成新一轮融资，本轮融资将用于研发投入和市场拓展，进一步提升公司核心竞争力。',
            cover: '',
            editTime: new Date().toISOString()
          },
          {
            _id: 'news2',
            title: '易凡科技与多家企业达成战略合作',
            content: '易凡科技近期与多家知名企业达成战略合作，将在软件开发、系统集成等领域展开深度合作，共同推动行业发展。',
            cover: '',
            editTime: new Date().toISOString()
          },
          {
            _id: 'news3',
            title: '易凡科技推出全新数字化解决方案',
            content: '易凡科技日前推出全新数字化解决方案，帮助企业加速数字化转型，提升运营效率和市场竞争力。',
            cover: '',
            editTime: new Date().toISOString()
          },
          {
            _id: 'news4',
            title: '易凡科技获评年度最佳软件服务商',
            content: '在日前举行的行业评选中，易凡科技凭借优质的服务和创新的技术获评"年度最佳软件服务商"称号。',
            cover: '',
            editTime: new Date().toISOString()
          }
        ];
      } finally {
        isLoading.value = false;
      }
    };
    
    // 获取统计数据
    const fetchStatistics = async () => {
      statisticsLoading.value = true;
      try {
        const res = await getOverview();
        if (res.data && res.data.ActionType === 'ok') {
          const data = res.data.data;
          statisticsData.value = [
            { title: '客户数量', value: data?.clientCount || 1000, icon: 'el-icon-user' },
            { title: '服务项目', value: data?.projectCount || 500, icon: 'el-icon-s-grid' },
            { title: '团队成员', value: data?.teamCount || 120, icon: 'el-icon-s-custom' },
            { title: '客户满意度', value: data?.satisfaction || 98, unit: '%', icon: 'el-icon-star-on' }
          ];
        }
      } catch (error) {
        console.error('获取统计数据失败:', error);
        // 设置默认数据
        statisticsData.value = [
          { title: '客户数量', value: 1000, icon: 'el-icon-user' },
          { title: '服务项目', value: 500, icon: 'el-icon-s-grid' },
          { title: '团队成员', value: 120, icon: 'el-icon-s-custom' },
          { title: '客户满意度', value: 98, unit: '%', icon: 'el-icon-star-on' }
        ];
      } finally {
        statisticsLoading.value = false;
      }
    };
    
    // 页面导航
    const navigateTo = (path) => {
      router.push(path);
    };
    
    // 查看新闻详情
    const viewNewsDetail = (id) => {
      router.push(`/news/${id}`);
    };
    
    // 播放视频
    const playVideo = () => {
      // 这里可以实现视频播放逻辑，如弹出视频播放器模态框
      alert('播放公司宣传视频');
    };
    
    onMounted(() => {
      fetchNews();
      fetchStatistics();
    });
    
    return {
      carouselSlides,
      businessAreas,
      newsList,
      isLoading,
      currentTime,
      formatDate,
      getSummary,
      navigateTo,
      viewNewsDetail,
      playVideo,
      statisticsData,
      statisticsLoading
    };
  }
}
</script>

<style lang="scss" scoped>
.home-page {
  .hero-section {
    margin-top: 0;
    position: relative;
    
    .carousel-content {
      height: 100%;
      background-position: center;
      background-size: cover;
      position: relative;
      
      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
      }
      
      .carousel-caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
        width: 80%;
        max-width: 800px;
        z-index: 2;
        
        .slide-subtitle {
          font-size: 28px;
          font-weight: 500;
          margin-bottom: 15px;
          letter-spacing: 1px;
        }
        
        .slide-title {
          font-size: 48px;
          font-weight: 700;
          margin-bottom: 30px;
          line-height: 1.2;
        }
        
        .slide-button {
          padding: 12px 30px;
          font-size: 16px;
          font-weight: 500;
          background-color: #163C7D;
          border-color: #163C7D;
          
          &:hover {
            background-color: darken(#163C7D, 10%);
            border-color: darken(#163C7D, 10%);
          }
        }
      }
    }
  }
  
  .business-areas {
    padding: 80px 0;
    background-color: #f9f9f9;
    
    .business-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      
      @media (max-width: 1200px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
      
      .business-card {
        background-color: white;
        padding: 40px 30px;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        
        &:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
          
          .business-hover {
            bottom: 0;
          }
        }
        
        .business-icon {
          margin-bottom: 20px;
          
          i {
            font-size: 48px;
            color: #163C7D;
          }
        }
        
        h3 {
          font-size: 22px;
          font-weight: 600;
          color: #333;
          margin-bottom: 15px;
        }
        
        p {
          font-size: 15px;
          color: #666;
          line-height: 1.6;
          margin-bottom: 20px;
        }
        
        .business-hover {
          position: absolute;
          bottom: -50px;
          left: 0;
          width: 100%;
          background-color: #163C7D;
          color: white;
          padding: 12px 0;
          transition: all 0.3s ease;
          font-weight: 500;
          
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
          }
        }
      }
    }
  }
  
  .news-section {
    padding: 80px 0;
    
    .section-header {
      text-align: center;
      margin-bottom: 50px;
      
      .section-title {
        font-size: 32px;
        font-weight: 700;
        color: #163C7D;
        position: relative;
        display: inline-block;
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: -15px;
          width: 60px;
          height: 3px;
          background-color: #163C7D;
          transform: translateX(-50%);
        }
      }
    }
    
    .news-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-bottom: 40px;
      
      @media (max-width: 992px) {
        grid-template-columns: 1fr;
      }
      
      .main-news {
        .main-news-item {
          background-color: white;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          cursor: pointer;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
          }
          
          .news-image {
            height: 300px;
            overflow: hidden;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.5s ease;
              
              &:hover {
                transform: scale(1.05);
              }
            }
          }
          
          .news-info {
            padding: 30px;
            
            h3 {
              font-size: 22px;
              font-weight: 600;
              color: #333;
              margin-bottom: 15px;
              line-height: 1.4;
            }
            
            p {
              font-size: 15px;
              color: #666;
              margin-bottom: 20px;
              line-height: 1.6;
            }
            
            .news-meta {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .date {
                color: #999;
                font-size: 14px;
              }
              
              .read-more {
                color: #163C7D;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 5px;
              }
            }
          }
        }
      }
      
      .sub-news {
        display: flex;
        flex-direction: column;
        gap: 20px;
        
        .sub-news-item {
          background-color: white;
          border-radius: 8px;
          padding: 25px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          cursor: pointer;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
          }
          
          .news-info {
            h3 {
              font-size: 18px;
              font-weight: 600;
              color: #333;
              margin-bottom: 15px;
              line-height: 1.4;
              
              // 两行文本溢出省略
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .news-meta {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .date {
                color: #999;
                font-size: 14px;
              }
              
              .read-more {
                color: #163C7D;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 5px;
              }
            }
          }
        }
      }
    }
    
    .news-more {
      text-align: center;
      
      .more-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #163C7D;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        padding: 10px 20px;
        border: 1px solid #163C7D;
        border-radius: 4px;
        transition: all 0.3s ease;
        
        &:hover {
          background-color: #163C7D;
          color: white;
        }
      }
    }
  }
  
  .video-section {
    padding: 80px 0;
    background-color: #f5f5f5;
    
    .video-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center;
      
      @media (max-width: 992px) {
        grid-template-columns: 1fr;
      }
      
      .video-text {
        h2 {
          font-size: 36px;
          font-weight: 700;
          color: #163C7D;
          margin-bottom: 20px;
          line-height: 1.3;
        }
        
        p {
          font-size: 16px;
          color: #666;
          margin-bottom: 30px;
          line-height: 1.7;
        }
        
        .video-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: #163C7D;
          font-size: 16px;
          font-weight: 500;
          text-decoration: none;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
      
      .video-player {
        .video-placeholder {
          position: relative;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          cursor: pointer;
          
          img {
            width: 100%;
            height: 350px;
            object-fit: cover;
          }
          
          .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background-color: rgba(22, 60, 125, 0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            
            i {
              font-size: 40px;
              color: white;
            }
            
            &:hover {
              background-color: rgba(22, 60, 125, 1);
              transform: translate(-50%, -50%) scale(1.1);
            }
          }
        }
      }
    }
  }
  
  .join-section {
    padding: 100px 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('~@/assets/images/about/办公环境2.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
    .join-container {
      display: flex;
      justify-content: center;
      align-items: center;
      
      .join-content {
        text-align: center;
        color: white;
        max-width: 700px;
        
        h2 {
          font-size: 42px;
          font-weight: 700;
          margin-bottom: 15px;
        }
        
        h3 {
          font-size: 28px;
          font-weight: 500;
          margin-bottom: 20px;
        }
        
        p {
          font-size: 16px;
          margin-bottom: 30px;
          line-height: 1.7;
          opacity: 0.9;
        }
        
        .join-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background-color: #163C7D;
          color: white;
          padding: 12px 30px;
          border-radius: 4px;
          font-size: 16px;
          font-weight: 500;
          text-decoration: none;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: lighten(#163C7D, 10%);
            transform: translateY(-3px);
          }
        }
      }
    }
  }
  
  .stock-section {
    padding: 40px 0;
    
    .stock-container {
      display: flex;
      justify-content: center;
      
      .stock-item {
        background-color: #f9f9f9;
        padding: 20px 40px;
        border-radius: 8px;
        text-align: center;
        
        .stock-name {
          font-size: 18px;
          font-weight: 600;
          color: #163C7D;
          margin-bottom: 10px;
        }
        
        .stock-price {
          font-size: 24px;
          font-weight: 700;
          color: #333;
          margin-bottom: 5px;
          
          .up {
            color: #ff4d4f;
            font-size: 16px;
          }
        }
        
        .stock-time {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }

  .statistics-section {
    background-color: #f5f7fa;
    padding: 80px 0;
    
    .statistics-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      margin-top: 50px;
      
      @media (max-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      @media (max-width: 576px) {
        grid-template-columns: 1fr;
      }
      
      .statistic-item {
        background-color: #fff;
        border-radius: 8px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
        
        &:hover {
          transform: translateY(-10px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .statistic-icon {
          font-size: 40px;
          color: #409EFF;
          margin-bottom: 20px;
        }
        
        .statistic-number {
          font-size: 36px;
          font-weight: 700;
          color: #303133;
          margin-bottom: 10px;
          
          .statistic-unit {
            font-size: 20px;
            margin-left: 5px;
          }
        }
        
        .statistic-title {
          font-size: 16px;
          color: #606266;
        }
      }
    }
  }
}
</style>